import React from 'react';
import { TableC, PrimaryC } from '../../components';

export default class TestTableCDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      columns: [
        { title: '姓名', key: 'name' },
        { title: '年龄', key: 'age' },
        { title: '身高', key: 'height' },
        { title: '体重', key: 'weight' },
        { title: '年级', key: 'level123' },
        { title: 'aaa', key: 'level12' },
      ],
      dataSource: [],
    };
  }

  onClick = () => {
    const data = [];
    for (let i = 0; i < 5000; ++i) {
      data.push({
        key: i,
        name: i,
        age: `new${i}`,
        height: 100,
        weight: '10.3.4.5654',
        level: 100,
      });
    }

    this.setState({
      dataSource: [...data],
    });
  };

  render() {
    return (
      <div>
        <PrimaryC onClick={this.onClick} title='查询' style={{ marginBottom: '20px' }} />
        <p>设置bigTable使用渲染大数据table组件</p>
        <TableC
          columns={this.state.columns}
          dataSource={this.state.dataSource}
          hidePage={true}
          scroll={{ y: 600 }} // 必须设置滚动高度 这里y:500是确定了这个table的高度为500，加载完数据后，就展示500高度的数据，当向下滑动滚动条后，就开始加载后面的数据。这样就解决了table数据过多的性能问题了。
          // components={VTComponents({ id: tableDemo, destroy: true })} // id一定是number类型，若有多个table用到了这个插件，记得id要不一样，不然会有问题。
          rowKey={'key'}
          bigTable={true}
        />
      </div>
    );
  }
}
